<template>
	<div id="mask">
		<!--<transition name="fade" style="z-index: 100;">-->
			<div v-if="dialog">
				<div class="mask" @click="hide"></div>
				<div class="mask-content">
					<div class="mask-content-close" @click="hide">
						<div></div>
						<div>{{title}}</div>
						<img src="../../static/img/icon/find_icon/close@3x.png"/>
					</div>
					<div class="null"></div>
					<div class="mui-content mui-scroll-wrapper" :id="id.substring(1)" style="margin-top: 40px;padding-top: 15px;">
						<div class="mui-scroll">
							<div class="mask-content-list" >
								<div class="item" v-for="item in list">
									<div class="left">
										<div>{{item.couponsName}}</div>
										<div>{{item.couponsExplain}}</div>
										<!--<div>有效期：{{item.endTime}}</div>-->
										<div v-if="item.couponsType == 1">满{{item.fullMoney || 0}}减{{item.reduceMoney || 0}}元&nbsp;&nbsp;限领{{item.restrictCount || 0}}张</div>
										<div v-else>{{item.discount || 0}}折优惠&nbsp;&nbsp;限领{{item.restrictCount || 0}}张</div>
										<div>有效期至{{item.endTime}}</div>
									</div>
									<div class="right" @tap="receive(item)">
										<div v-if="type == 1">立即领取</div>
										<div v-else-if="type == 2">使用</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>				
			</div>
		<!--</transition>-->
	</div>
</template>

<script>
	export default {
		props: {
			dialog: {
				type: Boolean,
				default: false
			},
			list: {
				type: [Array, Object],
				default: []
			},
			title: {
				type: String,
				default: ''
			},
			type: {
				type: Number,
				default: 1
			},
			id: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				page: 1
			}
		},
		methods: {
			hide() {
				this.$emit('hide')
			},
			receive(id) {
				this.$emit('receive', id)
			},
			pullupRefresh: function() {
				this.$emit('pullup')
           	},
           	pulldownRefresh () {
           		this.$emit('pulldown')
           	}
		},
		created() {
			//处理mui下拉加载的bug
			for(var i = mui.hooks.inits.length-1,item;i>=0;i--){
				item=mui.hooks.inits[i];
				if(item.name=="pullrefresh"){
				    item.repeat=true;
				}
			}
		},
		watch: {
			dialog(type) {
				if(type) {
					this.$nextTick(() => {
						console.log(this.id)
						mui.init({
			                pullRefresh: {
			                    container: this.id,
			                    up: {//上拉加载
			                    	height: 40,
			                        auto:false,//可选,默认false.自动上拉加载一次
			                        contentrefresh: '正在加载...',
			                        contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			                        callback: this.pullupRefresh
			                    },
								down: {                        
									contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容                        
									contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容                        
									contentrefresh: "正在刷新…", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容                        
									auto: false,//可选,默认false.首次加载自动下拉刷新一次                        
									callback: this.pulldownRefresh                   
								}
			                }
			            });
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.fade-enter-active, .fade-leave-active {
	  transition: opacity .5s;
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	  opacity: 0;
	}
	
	#mask::-webkit-scrollbar {display:none}

	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: rgba(0,0,0, 0.8);
	}
	
	.mask-content {
		position: fixed;
		z-index: 1001;
		border-radius: 10px;
		top: 5%;
		left: 10%;
		background: #fff;
		width: 80%;
		height: 90%;
		font-size: 14px;
		border: 10px solid #fff;
		text-align: center;
		overflow-y: scroll;
		border-top: 0;
		
		
		.mask-content-close {
			position: fixed;
			top: 5%;
			z-index: 1004;
			background: #fff;
			/*border-bottom: 1px solid #7b7b7b;*/
			display: flex;
			padding: 10px 12%;
			align-items: center;
			left: 0%;
			width: 100%;
			justify-content: space-between;
			
			div:first-child {
				width: 20px;
			}
			
			div:last-child {
				height: 100%;
			}
			
			img {
				width: 25px;
				height: 25px;
			}
		}
		
		.null {
			height: 45px;
			width: 100%;
		}
		
		.mask-content-list {
			padding: 0 10px;
			
			.item {
				overflow: hidden;
				display: flex;
				width: 100%;
				margin-bottom: 10px;
				border: 1px solid #ccc;
				/*align-items: center;*/
				border-radius: 5px;
				/*height: 60px;*/
				
				.left {
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					flex: 4;
					padding: 10px 5px;
					background: #fff;
					
					div:first-child {
						font-weight: bold;
					}
					
					div:last-child {
						font-size: 10px;
					}
				}
				
				.right {
					flex: 2;
					padding: 10px 5px;
					display: flex;
					color: #fff;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background: #BCE211;
				}
			}
		}
	}
</style>